<template>
  <div class="box">
    <div class="box-lt">
      <div>
        <el-date-picker
          v-model="year"
          type="year"
          @change="countBottomLeftList()"
          placeholder="选择年"
          style="margin-right: 20px"
        >
        </el-date-picker>
        <el-date-picker
          v-model="month"
          type="month"
          @change="countBottomLeftList()"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <bar-gradient
        name="countBottomLeft"
        :data="countBottomLeft"
        :extend="{ legend: false, label: true }"
      />
    </div>
    <div class="box-rt">
      <div style="text-align: right">
        <el-select
          clearable
          v-model="code"
          placeholder="全部"
          style="margin-right: 30px"
          @change="handle"
        >
          <el-option
            v-for="item in option"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <line-stack
        name="countBottomRight"
        :data="countBottomRight"
        :extend="{ legend: false }"
      />
    </div>
  </div>
</template>
<script>
import barGradient from '@c/echarts/bar-gradient'
import lineStack from '@c/echarts/line-stack'
export default {
  components: {
    barGradient,
    lineStack,
  },
  data() {
    return {
      year: '',
      month: '',
      option: [],
      code: '',
      countBottomLeft: { categories: [], series: [] },
      countBottomRight: { categories: [], series: [] },
    }
  },
  created() {
    this.itemList()
    this.countBottomLeftList()
    this.countBottomRightList()
  },
  methods: {
    itemList() {
      this.$axios.get('/count/bigscreent2/listWareHouseName').then((data) => {
        this.option = []
        if (data.code == 200) {
          this.option = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countBottomLeftList() {
      this.$axios
        .post('/count/bigscreent2/countBottomLeft', {
          month: this.month,
          year: this.year,
        })
        .then((data) => {
          this.countBottomLeft = { categories: [], series: [] }
          if (data.code == 200) {
            const categories = [],
              series = []
            data.data.forEach((element) => {
              categories.push(element.name)
              series.push(element.value)
            })
            this.countBottomLeft = {
              categories: categories,
              series: [
                {
                  name: '采购分析',
                  data: series,
                },
              ],
            }
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    handle() {
      this.countBottomRightList()
    },
    countBottomRightList() {
      this.$axios
        .get(`/count/bigscreent2/countBottomRight?code=${this.code}`)
        .then((data) => {
          this.countBottomRight = { categories: [], series: [] }
          if (data.code == 200) {
            this.countBottomRight = data.data
          } else {
            this.$message.error(data.msg)
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  &-lt {
    flex: 1;
  }
  &-rt {
    width: 400px;
  }
}
</style>
